<!-- 图片上传组件 -->
<template>
  <el-upload
    ref="hnyUpload"
    :headers="headers"
    :action="action"
    :limit="limit"
    list-type="picture-card"
    :disabled="disabled"
    :upload-before="uploadBefore"
    :on-success="uploadSuccess"
    :file-list="fileList"
  >
    <div class="hny-upload-content">
      <img src="@/assets/images/hny-add.png" alt="" class="hny-add_img">
      <div class="hny-upload-content-text">{{ title }}</div>
    </div>
    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <el-icon><zoom-in /></el-icon>
          </span>
          <span class="hny-upload-list-line"></span>
          <span class="el-upload-list__item-delete" @click="handleDownload(file)">
            <el-icon><Download /></el-icon>
          </span>
          <span  v-if="!disabled" class="hny-upload-list-line"></span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
    <template #tip>
      <div class="el-upload__tip hny-upload-tip">
        <span style="color: #164CE8;">{{fileList.length || 0}}</span>/{{ limit }}
        <span style="margin: 0 5px">|</span>
        {{tip}}
      </div>
    </template>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" class="dialog-image" />
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import { downloadFileBlob } from '@/utils/util';
import website from '@/config/website';
import crypto from '@/utils/crypto';
import { Base64 } from 'js-base64';
import { getToken } from '@/utils/auth';

const props = defineProps({
  // 请求的url
  action: {
    type: String,
    default: '/api/blade-resource/oss/endpoint/put-file-attach',
    required: true
  },
  // 上传头部
  headers: {
    type: Object,
    default: {
      'Authorization': `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`,
      'Blade-Auth': 'bearer ' + getToken()
    },
  },
  // 上传按钮文案
  title: {
    type: String,
    default: '点击上传',
  },
  // 上传提示文案
  tip: {
    type: String,
    default: '',
  },
  // 数量限制
  limit: {
    type: Number,
    default: 3,
  },
  // 大小限制(MB)
  fileSize: {
    type: Number,
    default: 10,
  },
  // 文件类型, 例如'png', 'jpg', 'jpeg',字符串，英文逗号隔开
  fileType: {
    type: String,
    default: '.png,.jpg,.jpeg',
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 已上传文件列表
  fileList: {
    type: Array,
    default: []
  }
});

const emits = defineEmits(['success', 'remove', 'before', 'update:fileList']);

const dialogImageUrl = ref("");
const dialogVisible = ref(false);



// 移除文件
const handleRemove = file => {
  let newData = props.fileList.filter(item => item.url !== (file.response ? file.response.data.link : file.url))
  emits('update:fileList', newData)
};

const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

const handleDownload = (file) => {
  downloadFileBlob(file.url, file.name);
};

const uploadBefore = (file, done, loading, column) => {
  emits('before', file)
}

//上传文件成功
const uploadSuccess = (response, file, fileList) => {
	emits('success', response, file, fileList)
};
</script>

<style lang="scss" scoped>
.hny-upload-content {
  text-align: center;
  .hny-upload-content-text {
    color: rgba(0, 0, 0, 0.4);
  }
}

.hny-upload-list-line {
  width: 1px;
  height: 16px;
  background: #fff;
}

.hny-upload-tip {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
}

.dialog-image {
  max-width: 100%; /* 限制图片最大宽度为父容器宽度 */
  max-height: 100%; /* 限制图片最大高度为父容器高度 */
  display: block; /* 使图片可以设置宽高 */
  margin: 0 auto; /* 水平居中 */
  overflow: auto; /* 当图片超出容器时显示滚动条 */
}

.hny-add_img {
  width: 30px;
  height: 30px;
  display: block;
  margin: 0 auto;
  margin-bottom: 5px;
}
</style>
